<template>
	<view class="page notice-deal">
		<nav-header title="交易通知" :show-right="false">
		</nav-header>

		<view class="deal">
			<view v-for="item in dealList" :key="item.id" class="deal-item">
				<view class="deal-time">{{ item.time }}</view>
				<view class="header">
					<view class="header-item" v-if="item.type == 0">
						<img :src="getResource('/icon/24px.svg')" alt="" class="deal-img">
						<text class="text-md-Regular">平台充值</text>
					</view>
					<view class="header-item" v-if="item.type == 1">
						<img :src="getResource('/icon/提现通知.svg')" alt="" class="deal-img">
						<text class="text-md-Regular">提现通知</text>
					</view>
					<view class="detail" @click="goDetail(item)">
						<text class="text-xs-Medium">账单详情</text>
						<up-icon size="16" name="arrow-right" color="#909399"></up-icon>
					</view>
				</view>
				<up-line></up-line>
				<view class="content">
					<view class="pay">
						<text>付款金额</text>
						<text class="money">￥{{ item.money }}</text>
						<!-- <view class="detail" @click="goDetail(item)">
							账单详情
							<up-icon size="16" name="arrow-right" color="#909399"></up-icon>
						</view> -->
					</view>
				</view>
				<view class="footer">
					<view class="footer-pay">
						<text>付款方式</text>
						<text class="channel">{{ item.way }}</text>
					</view>
					<view class="footer-company">
						<text>收单机构</text>
						<text class="company">{{ item.company }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dealList: [{
						id: 1,
						time: "前天 20:00",
						type: 0,
						money: "3249.29",
						way: "微信支付",
						company: "内蒙古星数通科技有限公司",
						status: "支付成功",
						payTime: "2024年11月03日 12:22:14",
						goods: "平台充值",
						payWay: "微信",
						payId: "4220000000000000020241104152504"
					},
					{
						id: 2,
						time: "昨天 18:01",
						type: 1,
						money: "3000.00",
						way: "内蒙古星数通科技有限公司",
						company: "中国银行(尾号8888)",
						status: "支付成功",
						payTime: "2024年11月04日 15:25:04",
						goods: "余额提现",
						payWay: "银行转账",
						payId: "4220000000000000020241104154548"
					}
				]
			}
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: "/pageSubOne/notice/notice-detail?data=" + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice-deal {
		.deal {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 20px;

			.deal-item {
				background-color: $white;
				padding: 24rpx;

				.deal-time {
					text-align: center;
					color: #8b8b8b;
					font-size: 30rpx;
				}

				.header {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					vertical-align: middle;

					.header-item {
						display: flex;
						align-items: center;
						color: $gray-900;

						.deal-img {
							width: 55rpx;
							height: 55rpx;
							margin-right: 20rpx;
						}
					}

					.detail {
						display: flex;
						align-items: center;
						color: $gray-400;
						gap: 8rpx;
					}
				}

				.content {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin: 54rpx 0;
					font-size: 30rpx;

					.pay {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #8b8b8b;

						.money {
							font-weight: 600;
							color: #000;
							font-size: 55rpx;
						}

						.detail {
							display: flex;
							margin-top: 20rpx;
							color: #8b8b8b;
							margin-left: 30rpx;
						}
					}
				}

				.footer {
					color: #8b8b8b;
					font-size: 30rpx;
					padding: 20rpx;

					.footer-pay {
						.channel {
							margin-left: 60rpx;
						}
					}

					.footer-company {
						margin-top: 20rpx;

						.company {
							margin-left: 60rpx;
						}
					}
				}
			}
		}
	}
</style>